<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>添加模版</title>
		<link rel="stylesheet" type="text/css" href="/webapp/css/easyui.css">
		<link rel="stylesheet" type="text/css" href="/webapp/css/icon.css">
		<link rel="stylesheet" type="text/css" href="/webapp/css/color.css">
		<link rel="stylesheet" type="text/css" href="/webapp/css/public.css">
		<script type="text/javascript" src="/webapp/js/lib/jquery.min.js"></script>
		<script type="text/javascript" src="/webapp/js/lib/jquery.easyui.min.js"></script>
		<script type="text/javascript" src="/webapp/js/lib/ajaxfileupload.js"></script>
		<script type="text/javascript" src="/webapp/js/common/config.js"></script>
	</head>
	<body class="easyui-layout">
		<div class="easyui-container-fluid">
			<div class="easyui-pannel" style="width: 100%;border: none;">
				<div class="nav"></div>
				<div class="form-wrapper wrapper-center">
					<form id="ff">
						<div class="box-item">
							<label for="" class="item-label">模板编码：</label>
							<input type="text" name="code"/>
							<label class="item-label">模版名称：</label>
							<input type="text" name="name"/>
							<label class="item-label">渠道：</label>
							<select id="channel" name="channelCode">
							</select>
						</div>
						<div class="box-item">				
							<label class="item-label">商场名位置：</label>
							<select name="mallLocation">
								<option value="FILE">商场名为文件名</option>
								<option value="SHEET">商场名为Excel的sheet名</option>
								<option value="COLUMN">商场名在Excel的列中</option>
								<option value="NONE">一个渠道一个商场</option>
							</select>
							<label class="item-label">品类位置：</label>
							<select name="categoryLocation">
								<option value="FILE">品类名为文件名</option>
								<option value="SHEET">品类名为Excel的sheet名</option>
								<option value="COLUMN">品类名在Excel的列中</option>
							</select>
						</div>
						<div class="box-item clearfix">
							<input type="button" class="btn-add fr" onclick="openWindow()" value="添加列">
						</div>

						<table id="datagrid" class="easyui-datagrid">
			               <thead>
			                 <tr>
			                   <th data-options="field:'columnIndex'" width="100">列序号</th>
			                   <th data-options="field:'columnType'" width="100">列类型</th>
			                   <th data-options="field:'operate'" width="100">操作</th>
			                   <th data-options="field:'operateValue'" width="100">操作值</th>
			                   <th data-options="field:'filter'" width="100">删除值</th>
			                   <th data-options="field:'include'" width="100">删除包含值</th>
			                   <th data-options="field:'exclude'" width="100">剩余值</th>
			                   <th data-options="field:'action',formatter:editDelete"></th>
			                 </tr>
			               </thead>
			               <tbody>
			               </tbody>
			             </table>
						<div class="box-item tc">
							<a href="javascript:void(0);" class="easyui-linkbutton c8" style="width:100px;" onclick="save()">保存</a>
						</div>
					</form>
				</div>
			</div>
		</div>
		<div id="w" class="easyui-window" title="添加列" data-options="modal:true,closed:true,iconCls:'icon-save'" style="width:400px;height:480px;padding:10px;">
			<form id="window-form">
				<div style="margin-bottom:20px">
						<input class="easyui-textbox" name="columnIndex" style="width:100%" data-options="label:'列序号：',required:true">
					</div>
					<div style="margin-bottom:20px">
						<select class="easyui-combobox" name="columnType" label="列类型：" style="width:100%">
		                  <option value="MALL">商场</option>
		                  <option value="BRAND">品牌</option>
		                  <option value="CATEGORY">品类</option>
		                  <option value="MODEL">型号</option>
		                  <option value="BRAND_CATEGORY">品牌品类</option>
		                  <option value="BRAND_MODEL">品牌型号</option>
		                  <option value="BRAND_CATEGORY_MODEL">品牌品类型号</option>
		                  <option value="CATEGORY_MODEL">品类型号</option>
		                  <option value="PRICE">销价</option>
		                  <option value="COUNT">销量</option>
		                  <option value="TOTAL">销额</option>
		                  <option value="WHOLE_PRICE">批发价</option>
		                  <option value="WHOLE_COUNT">批发量</option>
		                  <option value="WHOLE_TOTLE">批发额</option>
		                </select>
					</div>
					<div style="margin-bottom:20px">
						<select class="easyui-combobox" name="operate" label="列类型：" style="width:100%">
		                  <option value="MULTIPLY">乘法</option>
		                  <option value="DIVISION">除法</option>
		                  <option value="NONE">无操作</option>
		                </select>
					</div>
					<div style="margin-bottom:20px">
						<input class="easyui-textbox" name="operateValue" style="width:100%" data-options="label:'操作值：',required:true">
					</div>
					<div style="margin-bottom:20px">
						<input class="easyui-textbox" name="filter" style="width:100%" data-options="label:'删除值：',required:true">
					</div>
					<div style="margin-bottom:20px">
						<input class="easyui-textbox" name="include" style="width:100%" data-options="label:'删除包含值：',required:true">
					</div>
					<div style="margin-bottom:20px">
						<input class="easyui-textbox" name="exclude" style="width:100%" data-options="label:'剩余值：',required:true">
					</div>
				</form>
				<div style="text-align:center;padding:5px 0">
					<a href="javascript:void(0)" class="easyui-linkbutton c8" onclick="addColumn()" style="width:80px">Submit</a>
					<a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
				</div>
			</form>
		</div>

	</body>
	<script type="text/javascript">
	    var column_mappings = [];
	    function openWindow(){
	    	$("#w").window("open");
	    }
	    function addColumn(){
	    	var winform = document.getElementById("window-form");
	    	var col = getFormData(winform);
	    	$("#datagrid").datagrid("appendRow",col);
	    	$("#w").window("close");
	    	clearForm();
	    }
	    function clearForm(){
	    	$("#window-form").form("reset");
	    }
        $(function(){
        	$("#datagrid").datagrid({data:[]});
        });
        function editDelete(val,row,index){
            return "<a class='linkbutton' onclick='deleteOne(\""+index+"\")'>删除</a>"
        }
        function deleteOne(index){
            $("#datagrid").datagrid("deleteRow",index);
        }
        function save(){
        	var template = {};
        	template = getFormData(document.getElementById("ff"));
        	template.columnMappings = $("#datagrid").datagrid("getData").rows;
        	$.ajax({
        		url:config.url+"/template",
        		type:'post',
        		data:JSON.stringify(template),
                contentType : "application/json",
        		traditional:true,
        		dataType:'json',
        		success:function(data){
        			if(data){
        				$.messager.alert("提示","保存成功");
        			}
        		},
        		error:function(XMLHttpRequest,textStatus,errorThrown){
        		    console.log(XMLHttpRequest,textStatus,errorThrown)
                    $.messager.alert("错误",errorThrown);
        		}
        	});
        }
        $.ajax({
            url:config.url +"/channels/getAll",
            type:"get",
            xhrFields:{withCredentials:true},
            success:function (data) {
                var html='<option value="">--请选择--</option>';
                $.each(data,function (i, c) {
                    html+='<option value="'+c.code+'">'+c.name+'</option>'
                })
                $("#channel").html(html);
            }
        })
	</script>
</html>